﻿<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>bootstrap实现简洁多级导航菜单</title>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" type="text/css" href="css/bootsnav.css">
	<style type="text/css">
		.navbar-brand{
		    padding: 29px 15px;
		    height: auto;
		}
		nav.navbar.bootsnav{
		    border: none;
		    margin-bottom: 150px;
		}
		.navbar-nav{
		    float: left;
		}
		nav.navbar.bootsnav ul.nav > li > a{
		    color: #474747;
		    text-transform: uppercase;
		    padding: 30px;
		}
		nav.navbar.bootsnav ul.nav > li:hover{
		    background: #f4f4f4;
		}
		.nav > li:after{
		    content: "";
		    width: 0;
		    height: 5px;
		    background: #34c9dd;
		    position: absolute;
		    bottom: 0;
		    left: 0;
		    transition: all 0.5s ease 0s;
		}
		.nav > li:hover:after{
		    width: 100%;
		}
		nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{
		    content: "+";
		    font-family: 'FontAwesome';
		    font-size: 16px;
		    font-weight: 500;
		    position: absolute;
		    top: 35%;
		    right: 10%;
		    transition: all 0.4s ease 0s;
		}
		nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{
		    content: "\f105";
		    transform: rotate(90deg);
		}
		.dropdown-menu.multi-dropdown{
		    position: absolute;
		    left: -100% !important;
		}
		nav.navbar.bootsnav li.dropdown ul.dropdown-menu{
		    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		    border: none;
		}
		@media only screen and (max-width:990px){
		    nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after,
		    nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{ content: " "; }
		    .dropdown-menu.multi-dropdown{ left: 0 !important; }
		    nav.navbar.bootsnav ul.nav > li:hover{ background: transparent; }
		    nav.navbar.bootsnav ul.nav > li > a{ margin: 0; }
		}
	</style>
</head>
<body>
    <div class="demo" style="padding: 2em 0;">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <nav class="navbar navbar-default navbar-mobile bootsnav" style="width: 1200px">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                                <i class="fa fa-bars"></i>
                            </button>
                        </div>
                        <div class="collapse navbar-collapse" id="navbar-menu">
                            <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
                                <li><a href="#">网站首页</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">学院总览</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">学院概况</a></li>
                                        <li><a href="#">部门机构</a></li>
                                        
                                    </ul>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">招生专栏</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">直属班招生</a></li>
                                        <li><a href="#">函授（夜大）招生</a></li>
                                       <!--  <li><a href="#">培训招生</a></li> -->
                                    </ul>
                                </li>

                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">干部培训</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">培训概况</a></li>
                                        <li><a href="#">新闻动态</a></li>
                                        <li><a href="#">即将开班</a></li>
                                        <li><a href="#">学员风采</a></li>
                                        <li><a href="#">培训项目</a></li>
                                        <!-- <li><a href="#">校友名录</a></li>
                                        <li><a href="#">校友捐赠</a></li>
                                        <li><a href="#">校友通讯</a></li> -->
                                        
                                    </ul>
                                </li>

                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">学历教育</a>
                                    <ul class="dropdown-menu">
                                        
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">直属班</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">教学管理</a></li>
                                                <li><a href="#">成绩查询</a></li>
                                                <li><a href="#">相关制度</a></li>
                                                 
                                            </ul>
                                        </li>
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">校外站点</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">函授(夜大)</a></li>
                                                <li><a href="#">教学管理</a></li>
                                                 
                                            </ul>
                                        </li>
                                         <li><a href="#">自考教学</a></li>
                                    
                                        
                                             
                                       
                                    </ul>
                                </li>
                                
                                

                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">党群工作</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">组织机构</a></li>
                                        <li><a href="#">党员之家</a></li>
                                        <li><a href="#">教工之家</a></li>
                                    </ul>
                                    
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">学工园地</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">队伍建设</a></li>
                                        <li><a href="#">学生组织</a></li>
                                        <li><a href="#">学生活动</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">信息服务</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">规章制度</a></li>
                                        <li><a href="#">文档下载</a></li>
                                        
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>
	
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
 
	<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/bootsnav.js"></script>
</body>
</html>